import React from 'react';
// import {
// 	Route,
// 	Link
// } from 'react-router-dom';
import './index.scss';
import { getBanner, getCustomerList } from '@/api/user';
import { Carousel } from 'antd';
// import ajax from '@/api/public';

class Resource extends React.Component{
	constructor (props) {
		super(props)
		this.state={
			banner: '',
			demoList: [
			],
			slideList: [
			],
			nowBig: 3,
			nowIndex: 1,
			nowLeft: 0,
			slideLength: 710,
			mytransition: true
		}
	}
	turnLeft () {
		if (this.state.nowIndex - 1 <= 0) {
			this.setState({
				mytransition: false
			}, () => {
				this.setState({
					nowIndex: this.state.slideList.length / 2 ,
					nowBig: this.state.slideList.length / 2  + 2,
					nowLeft: -(this.state.slideList.length / 2) * 142
				}, () => {
					setTimeout(() => {
						this.setState({
							mytransition: true
						}, () => {
							this.setState({
								nowLeft: -(this.state.slideList.length / 2 - 1) * 142
							})
						})
					}, 30)
				})
			})
		} else {
			this.setState({
				nowBig: this.state.nowBig - 1,
				nowIndex: this.state.nowIndex - 1,
				nowLeft: this.state.nowLeft + 142
			})
		}
	}
	turnRight () {
		if (this.state.nowIndex + 5 > this.state.slideList.length) {
			this.setState({
				mytransition: false
			}, () => {
				this.setState({
					nowIndex: this.state.slideList.length / 2 - 3,
					nowBig: this.state.slideList.length / 2 - 1,
					nowLeft: -(this.state.slideList.length / 2 - 5) * 142
				}, () => {
					setTimeout(() => {
						this.setState({
							mytransition: true
						}, () => {
							this.setState({
								nowLeft: -(this.state.slideList.length / 2 - 4) * 142
							})
						})
					}, 300)
				})
			})
		} else {
			this.setState({
				nowBig: this.state.nowBig + 1,
				nowIndex: this.state.nowIndex + 1,
				nowLeft: this.state.nowLeft - 142
			})
		}
	}
	componentDidMount () {
		getBanner({type: 3}).then(res => {
			this.setState({
				banner: res.data.list[0].image
			})
		})
		getCustomerList({type: 1}).then(res => {
			this.setState({
				slideList: [...res.data.list, ...res.data.list]
			}, () => {
				this.setState({
					slideLength: this.state.slideList.length * 142
				})
			})
		})
		getCustomerList({type: 2, page: 1, limit: 6}).then(res => {
			this.setState({
				demoList: res.data.list
			})
		})
	}
	render() {
		return(
			<div>
				<div className='banner' style={{backgroundImage: `url(${this.state.banner})`}}></div>
				<div className='help-customer'>
					<div className='home-contain help-customer--contain'>
						<div className='customer-title text-center'>
							部分合作客户
						</div>
						<div className='text-center'>覆盖领域家居、金融、游戏、电商、教育等全行业</div>
						<div className='slide-group'>
							<i className='glyphicon glyphicon-toleft' onClick={this.turnLeft.bind(this)}></i>
							<div className='slides'>
								<div className={`slides-contain ${this.state.mytransition ? 'istransition' : ''}`} style={{width: this.state.slideLength + 'px',left: this.state.nowLeft + 'px'}}>
									{
										this.state.slideList.map((item, index) => {
											return (
												<img className={this.state.nowBig === (index + 1) ? 'now-big' : ''} style={{transition: 'all ease ' + this.state.istransition ? '0.3s' : '0s'}} src={item.image} alt={index} key={index}/>
											)
										})
									}
								</div>
							</div>
							<i className='glyphicon glyphicon-toright' onClick={this.turnRight.bind(this)}></i>
						</div>
					</div>
				</div>
				<div className='home-contain customer-demo'>
					<div className='customer-title text-center'>
						部分客户案例
					</div>
					<div className='text-center e-text'>BUFENKEHUANLI</div>
					<div className='demo-list'>
						{
							this.state.demoList.map((item, index) => {
								return (
									<div className='demo-one' key={index}>
										<a href={`#/${item.info}`}>
											<div className='mengban'></div>
											<img className='demo-img' src={item.image} />
										</a>
										<div className='demo-text'>
											<a href={`#/${item.info}`}>{item.name}</a>
										</div>
										<div className='demo-data'>
											{
												item.number && item.number.map((data, i) => {
													return (
														<div className='data-one' key={i}>
															<div>
																<i className={`glyphicon glyphicon-${data.icon}`}></i> {data.name}
															</div>
															<div className='two-line'>
																&nbsp;{data.value}
															</div>
														</div>
													)
												})
											}
										</div>
									</div>
								)
							})
						}
					</div>
				</div>
			</div>
		)
	}
}
export default Resource;
